﻿<#include "../../../common/_meta.ftl">
<link rel="stylesheet" href="${springMacroRequestContext.contextPath}/static/lib/layui-v2.5.6/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${springMacroRequestContext.contextPath}/static/lib/layui-soul-table/soulTable.css">
<title>菜单管理</title>
</head>
<body>
<nav class="breadcrumb">
	<!--页面导航栏-->
	<span class="layui-breadcrumb" lay-separator="-"></span>
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<div class="cl pd-5 bg-1 bk-gray">
		<!--from表单-->
		<form class="layui-form" action="">
			<div class="search-param">
				<div class="layui-inline">
					<input type="text" name="menuname" style="width:250px" placeholder="请输入菜单名称" autocomplete="off" class="input-text">
				</div>
				<button class="btn btn-success search-btn" lay-submit lay-filter="searchData"><i class="Hui-iconfont">&#xe665;</i>搜索</button>
				<button type="reset" class="btn search-btn">重置</button>
			</div>
		</form>
		<!--表格-->
		<table class="table table-border table-bordered table-hover table-bg" id="dataTable" lay-filter="table-filter"></table>
		<!--头部工具栏-->
		<script type="text/html" id="headToolbar">
			<span class="l">
				<a href="javascript:" class="btn btn-danger radius" lay-event="delete"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
				<a href="javascript:" class="btn btn-primary radius" lay-event="add"><i class="Hui-iconfont">&#xe600;</i> 添加菜单</a>
				<a href="javascript:" class="layui-btn layui-btn-sm" lay-event="clearFilter"><i class="Hui-iconfont">&#xe679;</i> 清除筛选条件</a>
			</span>
		</script>
		<!--行工具栏-->
		<script type="text/html" id="lineBar">
			<#--
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			-->
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
</div>
<!--_footer 作为公共模版分离出去-->
<#include "../../../common/_footer.ftl">
<!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${springMacroRequestContext.contextPath}/static/lib/layui-v2.5.6/layui/layui.js"></script>
<!--页面导航栏-->
<script type="text/javascript" src="${springMacroRequestContext.contextPath}/static/custom/js/element.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

$(function () {
	<!--页面导航栏-->
	breadcrumb(${menuid});
})

// 自定义模块
layui.config({
	base: contextPath+'/static/lib/layui-soul-table/ext/',   // 模块目录
	version : 'v1.4.4'
}).extend({                         // 模块别名
	soulTable: 'soulTable'
});

//新增编辑页面url
let editUrl = contextPath + '/admin/menuEdit';
//全局变量table
let table;
let soulTable;
layui.use(['form','table','soulTable','element'], function(){
	table = layui.table;
	soulTable = layui.soulTable;
	let element = layui.element;
	let form = layui.form;
	table.render({
		id: 'table_id'
		,elem: '#dataTable'
		,defaultToolbar: ['filter', 'print', 'exports'] //头部工具栏右侧图标
		,toolbar: '#headToolbar' //开启头部工具栏，并为其绑定左侧模板
		,title: '菜单表'
		,height: 'full-150'
		,method:"get"
		// ,contentType:"application/json"
		,url: contextPath+"/adminApi/menu/" //数据接口
		,response: {
			statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
		}
		,parseData: function(res){ //res 即为原始返回的数据
			return {
				"code": res.code, //解析接口状态
				"msg": res.message, //解析提示文本
				"count": res.data.total, //解析数据长度
				"data": res.data.list //解析数据列表
			};
		}
		,request: {
			pageName: 'pageNum' //页码的参数名称，默认：page
			,limitName: 'pageSize' //每页数据量的参数名，默认：limit
		}
		,page: true //开启分页
		,cols: [[ //表头

			{type: 'checkbox', fixed: 'left',field: 'menuid'}
			,{field: 'menuname', title: '菜单名称',childTitle: false,show:1, children: function(row) {
					return [
						{
							title: '表格一'
							,method:"get"
							// ,contentType:"application/json"
							,url: contextPath+"/adminApi/menu/" //数据接口
							,response: {
								statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
							}
							,parseData: function(res){ //res 即为原始返回的数据
								return {
									"code": res.code, //解析接口状态
									"msg": res.message, //解析提示文本
									"count": res.data.total, //解析数据长度
									"data": res.data.list //解析数据列表
								};
							}
							,where:{
								parentid:row.menuid
							}
							,request: {
								pageName: 'pageNum' //页码的参数名称，默认：page
								,limitName: 'pageSize' //每页数据量的参数名，默认：limit
							}
							,page: true //开启分页
							,cols: [[
								{type: 'checkbox', fixed: 'left',field: 'menuid'}
								,{field: 'menuname', title: '菜单名称',childTitle: false,show:1, children: function(row) {
										return [
											{
												title: '表格二'
												,method:"get"
												// ,contentType:"application/json"
												,url: contextPath+"/adminApi/menu/" //数据接口
												,response: {
													statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
												}
												,parseData: function(res){ //res 即为原始返回的数据
													return {
														"code": res.code, //解析接口状态
														"msg": res.message, //解析提示文本
														"count": res.data.total, //解析数据长度
														"data": res.data.list //解析数据列表
													};
												}
												,where:{
													parentid:row.menuid
												}
												,request: {
													pageName: 'pageNum' //页码的参数名称，默认：page
													,limitName: 'pageSize' //每页数据量的参数名，默认：limit
												}
												,page: true //开启分页
												,cols: [[
													{type: 'checkbox', fixed: 'left',field: 'menuid'}
													,{field: 'menuname', title: '菜单名称',childTitle: false,show:1, children: function(row) {
															return [
																{
																	title: '表格三'
																	,method:"get"
																	// ,contentType:"application/json"
																	,url: contextPath+"/adminApi/menu/" //数据接口
																	,response: {
																		statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
																	}
																	,parseData: function(res){ //res 即为原始返回的数据
																		return {
																			"code": res.code, //解析接口状态
																			"msg": res.message, //解析提示文本
																			"count": res.data.total, //解析数据长度
																			"data": res.data.list //解析数据列表
																		};
																	}
																	,where:{
																		parentid:row.menuid
																	}
																	,request: {
																		pageName: 'pageNum' //页码的参数名称，默认：page
																		,limitName: 'pageSize' //每页数据量的参数名，默认：limit
																	}
																	,page: true //开启分页
																	,cols: [[
																		{type: 'checkbox', fixed: 'left',field: 'menuid'}
																		,{field: 'menuname', title: '菜单名称',childTitle: false,show:1, children: function(row) {
																				return [
																					{
																						title: '表格四'
																						,method:"get"
																						// ,contentType:"application/json"
																						,url: contextPath+"/adminApi/menu/" //数据接口
																						,response: {
																							statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
																						}
																						,parseData: function(res){ //res 即为原始返回的数据
																							return {
																								"code": res.code, //解析接口状态
																								"msg": res.message, //解析提示文本
																								"count": res.data.total, //解析数据长度
																								"data": res.data.list //解析数据列表
																							};
																						}
																						,where:{
																							parentid:row.menuid
																						}
																						,request: {
																							pageName: 'pageNum' //页码的参数名称，默认：page
																							,limitName: 'pageSize' //每页数据量的参数名，默认：limit
																						}
																						,page: true //开启分页
																						,cols: [[
																							{type: 'checkbox', fixed: 'left',field: 'menuid'}
																							,{field: 'menuname', title: '菜单名称' , filter: false, sort: true}
																							,{field: 'sysCode', title: '系统编码' , filter: false, sort: true}
																							,{field: 'menuUrl', title: '菜单路径' , templet: '#menuUrlTpl'}
																							,{field: 'orderNum', title: '排序顺序',align:'center' , sort: true}
																							,{field: 'menuIcon', title: '图标',align:'center',templet:'<div><i class="Hui-iconfont {{d.menuIcon}} "></i></div>'}
																							,{fixed: 'right',title: '操作', align:'center', toolbar: '#lineBar'}
																						]]
																						,done: function () {
																							soulTable.render(this);
																						}
																					}
																				]
																			}}
																		,{field: 'sysCode', title: '系统编码' , filter: false, sort: true}
																		,{field: 'menuUrl', title: '菜单路径' , templet: '#menuUrlTpl'}
																		,{field: 'orderNum', title: '排序顺序',align:'center' , sort: true}
																		,{field: 'menuIcon', title: '图标',align:'center',templet:'<div><i class="Hui-iconfont {{d.menuIcon}} "></i></div>'}
																		,{fixed: 'right',title: '操作', align:'center', toolbar: '#lineBar'}
																	]]
																	,done: function () {
																		soulTable.render(this);
																	}
																}
															]
														}}
													,{field: 'sysCode', title: '系统编码' , filter: false, sort: true}
													,{field: 'menuUrl', title: '菜单路径' , templet: '#menuUrlTpl'}
													,{field: 'orderNum', title: '排序顺序',align:'center' , sort: true}
													,{field: 'menuIcon', title: '图标',align:'center',templet:'<div><i class="Hui-iconfont {{d.menuIcon}} "></i></div>'}
													,{fixed: 'right',title: '操作', align:'center', toolbar: '#lineBar'}
												]]
												,done: function () {
													soulTable.render(this);
												}
											}
										]
									}}
								,{field: 'sysCode', title: '系统编码' , filter: false, sort: true}
								,{field: 'menuUrl', title: '菜单路径' , templet: '#menuUrlTpl'}
								,{field: 'orderNum', title: '排序顺序',align:'center' , sort: true}
								,{field: 'menuIcon', title: '图标',align:'center',templet:'<div><i class="Hui-iconfont {{d.menuIcon}} "></i></div>'}
								,{fixed: 'right',title: '操作', align:'center', toolbar: '#lineBar'}
							]]
							,done: function () {
								soulTable.render(this);
							}
						}
					]
				}}
			,{field: 'sysCode', title: '系统编码' , filter: false, sort: true}
			,{field: 'menuUrl', title: '菜单路径' , templet: '#menuUrlTpl'}
			,{field: 'orderNum', title: '排序顺序',align:'center' , sort: true}
			,{field: 'menuIcon', title: '图标',align:'center',templet:'<div><i class="Hui-iconfont {{d.menuIcon}} "></i></div>'}
			,{fixed: 'right',title: '操作', align:'center', toolbar: '#lineBar'}
		]]
		, filter: {
			items:['column','data','condition','editCondition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
		}
		, excel:{ // 导出excel配置, （以下值均为默认值）
			on: true, //是否启用, 默认开启
			filename: '菜单.xlsx', // 文件名
			head:{ // 表头样式
				family: 'Calibri', // 字体
				size: 12, // 字号
				color: '000000', // 字体颜色
				bgColor: 'C7C7C7' // 背景颜色
			},
			font: { // 正文样式
				family: 'Calibri', // 字体
				size: 12, // 字号
				color: '000000', // 字体颜色
				bgColor: 'ffffff' //背景颜色
			}
		}
		, done: function (res, curr, count) {
			// 如果有使用到下拉筛选，这句话必须要
			soulTable.render(this)
		}
	});

	//监听头工具栏事件
	table.on('toolbar(table-filter)', function(obj){
		let checkStatus = table.checkStatus(obj.config.id)
				,data = checkStatus.data; //获取选中的数据
		switch(obj.event){
			case 'clearFilter':
				// 清除所有筛选条件并重载表格
				// 参数: tableId
				soulTable.clearFilter('table_id');
				break;
			case 'add':
				add('添加菜单',editUrl+'?menuid=','800');
				break;
			case 'update':
				if(data.length === 0){
					layer.msg('请选择一行');
				} else if(data.length > 1){
					layer.msg('只能同时编辑一个');
				} else {
					edit('菜单编辑', editUrl+'?menuid='+checkStatus.data[0].menuid);
				}
				break;
			case 'delete':
				if(data.length === 0){
					layer.msg('请选择一行');
				} else {
					let data = checkStatus.data;
					let ids = [];
					for (let i = 0; i < data.length; i++) {
						ids[i] = data[i].menuid;
					}
					//layer.alert(JSON.stringify(ids));
					layer.alert(ids.join(","));
					// layer.msg('删除');
				}
				break;
		};
	});

	//监听行工具事件
	table.on('tool(table-filter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		let data = obj.data //获得当前行数据
				,layEvent = obj.event; //获得 lay-event 对应的值
		if(layEvent === 'detail'){
			layer.msg('查看操作');
		} else if(layEvent === 'del'){
			layer.confirm('真的删除行么', function(index){
				layer.close(index);
				//向服务端发送删除指令
				del(this,data.groleid,obj);
			});
		} else if(layEvent === 'edit'){
			edit('菜单编辑', editUrl+'?menuid='+data.menuid);
		}
	});

	//from表单提交 搜索(重新载入数据)
	form.on('submit(searchData)', function(data){
		layer.msg(JSON.stringify(data.field));
		table.reload('table_id', {
			page: {
				curr: 1 //重新从第 1 页开始
			}
			,where: data.field
		});
		return false;
	});
});

/*-添加*/
function add(title,url,w,h){
	layer_show(title,url,w,h);
}
/*编辑*/
function edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*删除*/
function del(obj,id,obj2){
		$.ajax({
			type: 'DELETE',
			url: contextPath+'/adminApi/menu/'+id,
			dataType: 'json',
			success: function(data){
				if(data.data){//data等于true
					layer.msg('已删除!',{icon:1,time:1000});
					obj2.del(); //删除对应行（tr）的DOM结构
				}else{
					layer.msg('删除失败!',{icon:2,time:1000});
				}
			},
			error:function(data) {
				console.log(data.message);
			},
		});
}
</script>
<!--自定义列模板-->
<script type="text/html" id="menuUrlTpl">
	{{#  if(d.menuUrl != ''){ }}
		{{d.menuUrl}}
	{{#  } else { }}
		<div class="layui-table-cell">-</div>
	{{#  } }}
</script>
</body>
</html>